<template>
	<view class="body">
		<view class="sticky_box">
		    <u-sticky offset-top="0"
		              @fixed="isStickyFixed = true"
		              @unfixed="isStickyFixed = false">
		        <view>
		            <!-- 分类导航 -->
		            <view class="tabs">
		                <u-tabs :list="curriculumTypeList[selecIndex].children"
		                        name="name"
		                        paddingRight="50rpx"
		                        :current="currentTabIndex"
		                        @change="tabChange"
		                        height="80"
		                        font-size="32"
		                        bar-width="64"
		                        gutter="44"
		                        :bg-color="isStickyFixed ? '#fff' : '#fff'"
		                        inactive-color="#666666"
		                        active-color="#63B9F2"></u-tabs>
		                <image class="tabs_img"
		                       :src="isStickyFixed ? '/static/images/sy_icon_more_white@2x.png' : '/static/images/sy_icon_more_hui@2x.png'"
		                       @click="showCurriculum = true"
		                       mode="" />
		            </view>
		            
		        </view>
		    </u-sticky>
		</view>
		<scroll-view scroll-y="true"  style="height: calc(100vh - 150rpx);">
			<view class="list">
				<view class="card" v-for="item in 10">
					<view class="ls-f-ac">
						<image src="../../static/images/common_icon_school_small@3x.png" class="icon" mode=""></image>
						<view class="title">
							课程成果展示
						</view>
					</view>
					<view class="bottom">
						<view class="content">
							我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈
						</view>
						<view class="images ls-f">
							<image src="../../static/images/join102@2x.png" v-for="item in 9"  class="img" mode="aspectFill"></image>
						</view>
						<view class="time">
							2020.01.11
						</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
		
		<u-popup v-model="showCurriculum"
		         mode="top"
		         border-radius="32"
		         length="40%">
		    <div class="part-container">
		        <div class="title">课程类型</div>
		        <div class="time_box">
		            <div class="select-time-item"
		                 v-for="(item, index) in curriculumTypeList[selecIndex].children"
		                 :key="index"
		                 :class="{'selected': index == currentTabIndex,}"
		                 @click="tabChange(index)">
		                {{ item.name }}
		            </div>
		        </div>
		    </div>
		    <view class="footer_box u-flex u-row-between">
		        <u-button @click="showCurriculum = false"
		                  type="default"
		                  :hair-line="false"
		                  :ripple="true"
		                  :custom-style="{backgroundColor:'#F5F5F5',color:'#333',fontWeight: 'bold',fontSize:'32rpx',borderRadius: '16rpx',}"
		                  shape="circle"> 取消 </u-button>
		        <u-button @click="showCurriculum = false;"
		                  type="primary"
		                  :hair-line="false"
		                  :ripple="true"
		                  :custom-style="{backgroundColor:'#63B9F2',marginLeft:'30rpx',color:'#fff',fontWeight: 'bold',fontSize:'32rpx',borderRadius: '16rpx',}"
		                  shape="circle"> 确认 </u-button>
		    </view>
		
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginType: '',
				showCurriculum: false,
				parentList: [
				    {
				        pagePath: "/pages/index/index",
				        iconPath: "/static/images/nav_icon_sy_nor@2x.png",
				        selectedIconPath: "/static/images/nav_icon_sy_sel@2x.png",
				        text: "首页"
				    },
				    {
				        pagePath: "/pages/timeimagesles/timeimagesles",
				        iconPath: "/static/images/nav_icon_kcb_nor@2x.png",
				        selectedIconPath: "/static/images/nav_icon_kcb_sel@2x.png",
				        text: "课程表"
				    },
				    {
				        pagePath: "/pages/mine/mine",
				        iconPath: "/static/images/nav_icon_wd_nor@2x.png",
				        selectedIconPath: "/static/images/nav_icon_wd_sel@2x.png",
				        text: "我的"
				    },
				],
				teacherList: [
				    {
				        pagePath: "/pages/timeimagesles/timeimagesles",
				        iconPath: "/static/images/nav_icon_kcb_nor@2x.png",
				        selectedIconPath: "/static/images/nav_icon_kcb_sel@2x.png",
				        text: "课程表"
				    },
				    {
				        pagePath: "/pages/mine/mine",
				        iconPath: "/static/images/nav_icon_wd_nor@2x.png",
				        selectedIconPath: "/static/images/nav_icon_wd_sel@2x.png",
				        text: "我的"
				    },
				],
				selecIndex: 0,
				currentTabIndex: 0,
				loadingStatus: 'loadmore',
				queryData: {
				    week: "周一",
				    childrenClass: '',
				    categoryId: '',
				    pageSize: 100,
				    pageNum: 1,
				},
				bgImgList: [
				    { url: require('@/static/images/sy_pic_xqb_nor@2x.png'), selectUrl: require('@/static/images/sy_pic_xqb_sel@2x.png') },
				    { url: require('@/static/images/sy_pic_wutuo_nor@2x.png'), selectUrl: require('@/static/images/sy_pic_wutuo_sel@2x.png') },
				    { url: require('@/static/images/sy_pic_night_nor@2x.png'), selectUrl: require('@/static/images/sy_pic_night_sel@2x.png') },
				],
				curriculumTypeList: [
				
				],
				weekSelectIndex: 0,
				weekList: [
				    { id: 1, name: '周一' }, { id: 1, name: '周二' }, { id: 1, name: '周三' }, { id: 1, name: '周四' }, { id: 1, name: '周五' },
				],
				curriculumList: [],
				curriculumItemList: [],
				isStickyFixed: false,
				customStyle: {
				    width: '128rpx',
				    height: '64rpx',
				    background: ' #63B9F2',
				    borderRadius: '16rpx',
				},
				userInfo: {},
				studentCurriculumList: [],
			}
		},
		onLoad() {
			 this.getCategoryTree()
		},
		methods: {
			getCategoryTree() {
			    this.$api.getCategoryTree({}, res => {
			        res.data.forEach(ele => {
			            ele.children.unshift(
			                { id: '', name: "全部" }
			            )
			        });
			        // this.queryData.categoryId = res.data[0].id
			        this.curriculumTypeList = res.data
			    });
			},
		}
	}
</script>

<style scoped lang="scss">
	.body{
		
	}
	.list{
		
		margin-left: 32rpx;
		.bottom{
			margin-left: 50rpx;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
			
		}
		.time{
			margin-top: 32rpx;
color: #999999;
font-size: 24rpx;
margin-left: 20rpx;
		}
		.content{
			margin-left: 10rpx;
			font-size: 28rpx;
color: #333333;
		}
		.title{
			font-weight: bold;
font-size: 36rpx;
		}
		.img{
			border-radius: 15rpx;
			margin-top: 16rpx;
			width: 176rpx;
			height: 176rpx;
			margin-left: 16rpx;
		}
		.card{
			margin-top: 26rpx;
			width: 686rpx;
			padding: 32rpx 32rpx 10rpx 32rpx; 
			background: #FFFFFF;
			border-radius: 32rpx;
			
			.icon{
				margin-right: 16rpx;
				width:48rpx;
				height:48rpx;
			}
			.images{
				
				flex-wrap:wrap;
			}
		}
	}
.curriculum_type_box {
    margin: 30rpx;
    .curriculum_item {
        flex: 1;
        color: #fff;
        border-radius: 30rpx;
        background-size: cover;
        background-position: center;
        height: 144rpx;
        .curriculum_item_text {
            font-size: 36rpx;
            margin-left: 24rpx;
        }
    }
    .curriculum_item + .curriculum_item {
        margin-left: 30rpx;
    }
}
.tabs {
    position: relative;
    .tabs_img {
        position: absolute;
        right: 0;
        top: 16rpx;
        width: 92rpx;
        height: 48rpx;
    }
}

.week_box {
    padding: 30rpx;
    background: #f0f2f5;
    .week_item {
        flex: 1;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        border: 1rpx solid #fff;
        background: #ffffff;
        border-radius: 16rpx;
        transition: all 0.3s;
        &.sticky {
            background-color: #f0f2f5;
        }
        &.active {
            background: #f0f9ff;
            color: #63b9f2;
            border: 1rpx solid #63b9f2;
        }
    }
    .week_item + .week_item {
        margin-left: 16rpx;
    }
}
.curriculum_box {
    margin: 30rpx 0;
    .curriculum_item {
        padding: 16rpx;
        background: #ffffff;
        border-radius: 32rpx;
        .curriculum_img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 16px;
            margin-right: 32rpx;
        }
        .right_box {
            flex: 1;
            align-items: flex-start;
            height: 200rpx;
            .right_bottom_box {
                width: 100%;
            }
            .curriculum_title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
            }
            .curriculum_text {
                font-size: 24rpx;
                color: #333;
            }
            .curriculum_surplus {
                font-size: 24rpx;
                color: #63b9f2;
            }
        }
    }
    .curriculum_item + .curriculum_item {
        margin-top: 30rpx;
    }
}
.padding_box {
    padding: 0 30rpx;
}
.sticky_box {
    background-color: #fff !important;
}

.title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    text-align: justify;
    padding-right: 30rpx;
    position: relative;
    height: 60rpx;
    line-height: 60rpx;
}
.time-KP-box {
    padding-bottom: 30rpx;
}
.part-container {
    padding: 22rpx 0rpx 0rpx 28rpx;
}
.time_box {
    flex-wrap: wrap;
    padding-left: 15rpx;
    box-sizing: border-box;
    display: flex;
}
.select-time-item {
    min-width: 115rpx;
    max-width: 200rpx;
    height: 60rpx;
    display: inline-block;
    padding: 0 30rpx;
    text-align: center;
    font-size: 28rpx;
    line-height: 60rpx;
    margin: 12rpx 35rpx 10rpx 0rpx;
    color: #333;
    border-radius: 30rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.2s;
    flex: 1 1 auto;
    border: 1rpx solid #fff;
    background: #f5f5f5;
}
.select-time-item.selected {
    background: #f0f9ff;
    color: #63b9f2;
    border: 1rpx solid #63b9f2;
}

.knowledgePoints-box {
    padding: 20rpx 30rpx 22rpx 28rpx;
    .knowledgePoints-text {
        font-size: 30rpx;
        color: #000;
        text-align: center;
        margin: 0 20rpx 0 0;
    }
    .knowledgePoints-selectItem-box {
        position: relative;
        left: 90rpx;
        top: -35rpx;
        padding: 0 30rpx;
    }
    .knowledgePoints-selectItem {
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 15rpx;
        text-align: center;
        font-size: 28rpx;
        margin-bottom: 30rpx;
        margin-right: 30rpx;
        color: #828282;
        border: 1rpx solid;
        min-width: 100rpx;
        display: inline-block;
        padding: 0 15rpx;
    }
    .knowledgePoints-selectItem.selected {
        background-color: #63b9f2;
        color: #fff;
    }
    .knowledgePoints-selectItem.allKp {
        margin-right: 100%;
    }
}
.footer_box {
    u-button {
        flex: 1;
        /deep/.u-btn--bold-border {
            border: 0;
        }
    }
}
</style>
